<template>
  <div class="activity-ftz">
    <img :src="bg_top" alt="520活动" class="activity-ftz-top">
    <div class="activity-ftz-input" :style="{top: inputHeight + 'px'}">
      <p>输入手机号，红包自动放入账户</p>
      <input type="number" v-model="mobile">
      <div role="button" @click="getRed">马上领取</div>
    </div>
    <img :src="bg_bottom" alt="520活动" class="activity-ftz-bottom">
    <vmask v-show="maskShow"></vmask>
  </div>
</template>

<script>
  import vmask from 'components/common/mask'
  import popUp from 'components/common/popup/popup.js'
  import { Toast, Indicator } from 'mint-ui'

  export default {
    data () {
      return {
        bg_top: require('./bg_top.png'),
        bg_bottom: require('./bg_bottom.png'),
        w: 0,
        h: 0,
        mobile: null,
        maskShow: false,
        inviteCode: ''
      }
    },
    computed: {
      inputHeight () {
        return (646 / 1218) * this.h
      }
    },
    created () {
      this.w = document.documentElement.clientWidth
      this.h = this.w * (1218 / 750)
      if (this.$route.query['mobile'] && this.$route.query['mobile'] !== '') {
        this.mobile = this.$route.query['mobile']
      }
      if (this.$route.query['c'] && this.$route.query['c'] !== '') {
        this.inviteCode = this.$route.query['c']
      }
    },
    methods: {
      invest () {
        this.$router.push('/invest')
      },
      getRed () {
        const that = this
        this.$http.get(`/api/regist/receiveCoupon?mobile=${this.mobile}`)
          .then((res) => {
            if (res.data.retCode === '0000') {
              // 已注册，领取红包成功
              this.maskShow = true
              const popup = popUp({
                container: '.activity-ftz',
                innerHtml: '<p style="text-align: center">52元红包已放入账户中</p>',
                type: 'alert',
                positiveText: '确定'
              })
              popup.positive = () => {
                popup.close()
                that.maskShow = false
                that.$router.push('/mine')
              }
              return
            }
            if (res.data.retCode === '1002') {
              // 未注册情况
              that.$router.push(`/signup?from=520&mobile=${this.mobile}&c=${this.inviteCode}`)
            }
          })
          .catch((err) => {
            console.log(err)
          })
      }
    },
    components: {
      vmask,
      Indicator,
      Toast
    }
  }
</script>

<style lang='scss' scoped>
  .activity-ftz {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #fffbdd;
    &-input {
      flex: 1;
      width: 100%;
      background: #fffbdd;
      p {
        margin: 30px 0 26px 0;
        text-align: center;
        font-size: 30px;
        color: #9e8d36;
      }
      input {
        box-sizing: border-box;
        width: 474px;
        height: 88px;
        margin: 0 auto 20px auto;
        background: #fff;
        border: 1px solid #e9e8b0;
        border-radius: 6px;
        outline: none;
        text-indent: 20px;
        font-size: 36px;
        line-height: 88px;
      }
      div {
        box-sizing: border-box;
        width: 474px;
        height: 100px;
        margin: 0 auto;
        background: #ff3d3d;
        border-radius: 6px;
        font-size: 39px;
        line-height: 100px;
        text-align: center;
        color: #fffffe;
      }
    }
    &-top {
      width: 100%;
      height: 563px;
      flex: 0 1 563px;
    }
    &-bottom {
      background: #fffbdd;
      width: 100%;
      height: 307px;
      flex: 0 1 307px;      
    }
  }
</style>
